<template>
  <div>

   <el-tabs class="zz" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane  label="个性推荐" name="first"></el-tab-pane>
    <el-tab-pane label="专属定制" name="second"></el-tab-pane>
    <el-tab-pane label="歌单" name="third"></el-tab-pane>
    <el-tab-pane label="排行榜" name="fourth"></el-tab-pane>
     <el-tab-pane label="歌手" name="fifth"></el-tab-pane>
      <el-tab-pane label="最新音乐" name="sixth"></el-tab-pane>
  </el-tabs>

    <div class="lbt">
      <el-carousel :interval="3000" type="card" height="180px">
        <el-carousel-item v-for="item in todoList" :key="item.imageUrl">
          <img :src="item.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <button @click="getStudents()">456464</button>
  </div>
</template>

<script>
import axios from "axios";
import jsCookie from 'js-cookie'

export default {
  name: "shouye",
  data() {
    return {
      todoList: "",
       activeName: 'second'
   
    };
  },
  methods: {
       handleClick(tab, event) {
        console.log(tab, event);
      },
    getStudents() {
    jsCookie.set('code','200')
      axios.get("http://localhost:3000/user/account").then(
        (response) => {
          console.log("获取数据成功", response.data);
       
        },

        (err) => {
          console.log("获取数据失败" + err);
        }
      );
    },
    dian(){
     
    }
  },
  mounted() {
      axios.get("http://localhost:3000/banner").then(
        (response) => {
        //   console.log("获取数据成功", response.data.banners);
          this.todoList = response.data.banners;
        //   console.log(this.todoList);
        },

        (err) => {
          console.log("获取数据失败" + err);
        }
      );
  }

};
</script>

<style >
* {
  padding: 0;
  margin: 0;
}
.zz {
  width: 30vw;
  height: 3vw;
  /* background-color: aquamarine; */
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 2vw;
  top: 1vw;
}
.el-tabs__nav-scroll {
  
}
.el-tabs__active-bar{ 
background-color: red;
height: 0.3vw;
}
.el-tabs__item.is-active {
    color: #000000;
    font-size: 2vw;
    font-weight: bolder;
}


.el-carousel__item img {
  width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  /* background-color: #003681; */
  border-radius: 1vw;
}

.el-carousel__item:nth-child(2n + 1) {
  /* background-color: #d3dce6; */
  border-radius: 1vw;
}
.lbt {
  width: 80%;
  margin: auto;
  position: relative;
  top: 2vw;
}
</style>